<template>
    <div>
        <ul>
            <li v-for="i in datalist">
                {{i.id}}={{i.text}} 
                <TodoManage :tid="i.id" :done="i.done"></TodoManage>
            </li>
        </ul>
    </div>
</template>

<script>
import {ref,reactive,defineProps,defineEmits,toRefs,isReactive} from 'vue'
import TodoManage from './TodoManage.vue'
export default {
    props:['datalist'],
    emits:['delete-item','done'],
    setup (props,context) {
         let datalist=props.datalist;
        //  console.log(datalist);
        let deleteItem=(id)=>{
            context.emit("delete-item",id)
        }
        let done=(id)=>{
            context.emit("done",id);
        }
        return {
            datalist,
            deleteItem,
            done
        }
    },
    components:{
        TodoManage
    }
}
// const emits=defineEmits(["delete-item"]);
// const props=defineProps(["datalist"])
// let datalists=props.datalist.state;
//         console.log(isReactive(datalists))
//          console.log(datalists);
// let deleteItem=(id)=>{
//     emits("delete-item",id)
// }

</script>

<style lang="scss" scoped>

</style>